<template>
	<view class="bgPostionImg" ref='bgPostionImg'
		:style="{background:`url(${imageUrl}.jpg) center center/cover no-repeat`}">
		<HeaderTop>
			<template v-slot:title>
				<view>福利</view>
			</template>
		</HeaderTop>
		<view class="happyAcceptance1 mediaBox">
			<view class="happyAcceptance2">
				<view class="happyAcceptance3">
					<view class="happyAcceptance4">
						<view class="happyAcceptanceBorder">
							<button class="happyAcceptanceBtn" @click="receiveFn">开心收下</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import placeMap from '@/libs/place-map.js';
	export default {
		data() {
			return {
				imgPath: '', // 获取线上地址
				img: '', // 默认图片
				place: {}, // 地区编码
				num: 0, // 次数
				placeImg: '', // 地区编码
				imageUrl: '',
			};
		},
		onLoad(payload) {
			console.log(payload)
			this.num = payload.scanCount;
			// this.num = 1;
		},
		onShow() {
			let regionObj = uni.getStorageSync('region1');
			this.place = placeMap();
			// 判断是否有线上接口
			let tempImgPath = uni.getStorageSync('imgPath');
			// 做验证 以防没有获取到本地存储的值
			// 如果存在的话就正常给 imgPath 赋值
			if (tempImgPath) {
				this.imgPath = tempImgPath + 'static/BD_tg/';
			} else {
				// 如果不存在的话依旧给死值
				this.imgPath = 'http://images.linglinggong.net/static/BD_tg/';
			}
			// 地区判断如果有的话 就是执行对应地区的
			if (regionObj) {
				let region = regionObj.slice(0, 6);
				console.log('有区域', this.place[region]); // 东阳市 - 其他区/市
				// 地区编码
				this.placeImg = uni.getStorageSync('region1').slice(0, 6);
				// console.log(this.placeImg);
				this.imageUrl = this.imgPath + this.placeImg + '_' + this.num;
			} else {
				// 没有的话默认就是 义乌市 
				// 没有话，默认是 330782
				uni.setStorageSync('region1', '330782001');
				console.log('没有区域,展示义乌活动,设置默认', this.place[330782]); // 义乌市
				this.placeImg = '330782'; // 默认就是固定的
				this.num = 1;
			}
		},
		onUnload() {
			// 页面被销毁（模拟移动端物理返回+左右滑动返回不生效做的处理）
			uni.setStorageSync('tempState', 'no');
			uni.switchTab({
				url: "/pages/index/index"
			})
		},
		methods: {
			async receiveFn() {
				// 点击完 收下 就跳转到 首页 把状态调成 no 下次刷新就不会进到活动页
				uni.setStorageSync('tempState', 'no');
				// // /nt/user/executeBind
				let res = await this.$fetch('/nt/user/executeBind', {}, "POST");
				console.log(res);
				if (res.code != 0) {
					uni.showToast({
						title: res.msg,
						icon: "none",
						duration: 1500
					})
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/index/index"
						})
					}, 2000)
				} else {
					uni.switchTab({
						url: "/pages/index/index"
					})
					console.log('打印返回');
				}
			},
		},
	}
</script>
<style lang="less" scoped>
	.bgPostionImg {
		width: 100vw;
		height: 1624rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	// .newEmployerImg {
	// 	z-index: -1;
	// 	position: absolute;
	// 	top: 0;
	// 	left: 0;
	// 	width: 750rpx;
	// 	height: 100vh;
	// }
	.happyAcceptance1 {
		width: 87%;
		background: white;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 180rpx;
		// 让盒子过去 50%
		left: 50%;
		// 在不确定宽高的时候就可以使用他\或者其他方法
		// 以平移的方式 -50% 让盒子的右边对齐
		transform: translateX(-50%);

		.happyAcceptance2 {
			width: 90%;
			height: 160rpx;
			margin-top: 25rpx;
			background: rgba(255, 255, 255, .8);
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.happyAcceptance3 {
				width: 90%;
				height: 155rpx;
				margin-top: 25rpx;
				background: rgba(255, 255, 255, .6);
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.happyAcceptance4 {
					width: 90%;
					height: 150rpx;
					margin-top: 25rpx;
					background: rgba(255, 255, 255, .3);
					border-radius: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}

	.happyAcceptanceBorder {
		width: 90%;
		background: rgb(255, 225, 161);
		padding: 15rpx;
		border-radius: 80rpx;
		margin-bottom: 75rpx;
		box-shadow: 0rpx 5rpx 20rpx rgba(255, 0, 0, .3);
		display: flex;
		justify-content: center;
		align-items: center;

		.happyAcceptanceBtn {
			width: 100%;
			height: 100%;
			border-radius: 80rpx;
			background: rgb(254, 76, 40);
			color: white;
			font-size: 35rpx;
		}
	}
</style>